<template>
  <div class="card">
    <a-form-model layout="inline">
      <a-form-model-item>
        <a-input v-model="phone" allowClear placeholder="用户手机"></a-input>
      </a-form-model-item>
      <a-form-model-item>
        <a-input v-model="realname" allowClear placeholder="用户姓名"></a-input>
      </a-form-model-item>
      <a-form-model-item>
        <a-select allowClear v-model="all_brand" style="width: 150px">
          <a-select-option v-for="(item, index) in branArrs" :key="index" :value="item.id">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item>
        <a-button type="primary" @click="getDataList">查询</a-button>
      </a-form-model-item>
      <a-form-model-item>
        <a-button @click=";(phone = ''), (realname = ''), (all_brand = ''), getDataList">重置</a-button>
      </a-form-model-item>
    </a-form-model>

    <a-spin :spinning="loading">
      <a-table
        bordered
        :columns="columns"
        :data-source="tableData"
        :rowKey="(record, index) => index"
        :pagination="pagination"
        @change=";(pagination = $event), getDataList()"
      >
      </a-table>
    </a-spin>
  </div>
</template>

<script>
import { getSmsLogApi } from '@/api/smslog.js'
export default {
  name: 'appMyRate',
  components: {},
  data() {
    return {
      loading: false,
      all_brand: '',
      phone: '',
      realname: '',
      branArrs: [{ id: '1', name: '全部品牌' }],
      tableData: [],
      pagination: {
        total: 0,
        current: 1,
        pageSize: 50
      },
      columns: [
        {
          title: '#',
          dataIndex: 'id',
          align: 'center'
        },
        {
          title: '手机号',
          dataIndex: 'phone',
          align: 'center'
        },
        {
          title: '内容',
          dataIndex: 'content',
          align: 'center'
        },
        {
          title: '数量',
          dataIndex: 'num',
          align: 'center'
        },
        {
          title: '发送时间',
          dataIndex: 'ctime',
          align: 'center'
        },
        {
          title: '发送状态',
          dataIndex: 'send_status_text',
          align: 'center'
        },
        {
          title: '接受时间',
          dataIndex: 'receive_timestamp',
          align: 'center'
        }
      ]
    }
  },
  created() {
    this.getDataList()
  },
  computed: {},
  methods: {
    async getDataList() {
      this.loading = true
      this.selectedArrIds = []
      try {
        var json = {
          page: this.pagination.current,
          page_size: this.pagination.pageSize,
        brand_id: process.env.VUE_APP_BRAND_ID,
          search: {
            phone: this.phone,
            realname: this.realname,
            all_brand: this.all_brand
          }
        }
        const { data } = await getSmsLogApi(json)
        this.tableData = data.list
        this.pagination.total = data.total
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
.card {
  padding: 20px;
  background-color: #fff;
}
</style>
